<script setup lang="ts">
import { useDidShow } from "@tarojs/taro";

import Tab from "./Tab.vue";
import MerchantMenu from "./MerchantMenu.vue";
import ViewList from "@/components/common/ViewList.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";
import ActivitiCardForMerchant from "./ActivitiCardForMerchant.vue";
import ActivitiCard from "@/pages/index/components/ActivitiCard.vue";

import useList from "@/hooks/useList";
import ApiActivity from "@/api/activity";

import {
  TActivity,
  TActivityApply,
  TMerchantInfo,
  TMerchantStaff,
} from "@/global";
import useMerchant from "@/stores/merchant";

const { source } = defineProps<{
  source: TMerchantStaff;
  applyDetail?: TMerchantInfo;
}>();

// 已报名
const {
  list: listApplied,
  loading: loadingApplied,
  resetToFirst: resetToFirstApplied,
} = useList<TActivityApply>(ApiActivity.getApplyActivityList);

// 正在招商(已过滤参与报名的活动)
const { list, loading, resetToFirst } = useList<TActivity>(
  ApiActivity.activityList,
  { search: { inv_status: 1 } }
);

useDidShow(() => {
  resetToFirst();
  resetToFirstApplied();
});

const store = useMerchant();
</script>

<template>
  <view class="safe-footer">
    <MerchantMenu class="p-5" :source="source" />

    <template v-if="store.merchantStaff?.staff_type === 1">
      <ContentBox class="hidden">
        <view class="px-7">
          <view class="px-6 py-4 bg-light rounded-[52px] mb-2">
            <view class="text-[72px] text-error">￥0</view>

            <view class="flex justify-between text-sm">
              <text class="text-dark">收款总额</text>
              <view class="text-primary">今日 +￥0</view>
            </view>
          </view>

          <view class="px-6 py-4 bg-light rounded-[52px] mb-2">
            <view class="text-[72px] text-error">0</view>

            <view class="flex justify-between text-sm">
              <text class="text-dark">核销次数</text>
              <view class="text-primary">今日 +0</view>
            </view>
          </view>

          <view class="flex">
            <view
              class="flex basis-3/5 items-center justify-between rounded-full h-[80px] bg-light px-6"
            >
              <text class="text-dark text-sm">押金</text>
              <!-- <text class="text-xl text-error">￥{{ deposit }}</text> -->
            </view>

            <view
              class="flex basis-2/5 items-center justify-between rounded-full h-[80px] bg-light px-6 ml-2"
            >
              <text class="text-dark text-sm">店员</text>
              <text class="text-xl text-error">0</text>
            </view>
          </view>

          <view class="text-center py-1.5 text-xs text-primary">
            2023-01-01 19:00:00 新数据
          </view>
        </view>
      </ContentBox>

      <template v-if="list.length > 0">
        <Tab title="正在招募" />
        <ViewList
          class="px-4 py-5"
          :loading="loading"
          :is-empty="list.length == 0"
          empty-title="暂无更多招募活动"
        >
          <ActivitiCard
            v-for="item in list"
            :key="item.id"
            :source="item"
            :merchant="source.merchant_id"
            class="mb-3"
          />
        </ViewList>
      </template>

      <Tab title="我的报名" />

      <ViewList
        class="px-4 py-5"
        :loading="loadingApplied"
        :is-empty="listApplied.length == 0"
      >
        <ActivitiCardForMerchant
          v-for="item in listApplied"
          :key="item.id"
          :source="item"
          class="mb-3"
        />
      </ViewList>
    </template>
  </view>
</template>
